<template>
  <div>
    <nav-bar title="我的游戏"/>
    <div class="content_scroll">
      <ul class="game_box">
        <li v-for="(item, index) in gameList" :key="index" class="game_list" @click="itemClick(index)" @touchstart="showDeleteButton(index)" @touchend="clearLoop(index)">
          <img :src="item.gameicon" alt="">
          <div class="game_info">
            <div class="game_name">
              <div>{{item.gamename | filterFun}}</div>
              <div class="ganename-discount" v-show="!item.hide_discount_label && item.game_type != 1">
                <span v-if="!item.is_flash">{{ item.discount }}折</span>
                <span v-else>{{ item.flash_discount }}折</span>
              </div>
            </div>
            <div class="game_type">
              <span>
                <div v-if="item.game_type == 1">变态版 | </div>
                <div v-else-if="item.game_type == 2">折扣游戏 | </div>
                <div v-else-if="item.game_type == 3">H5 | </div>
              </span>
              <span>{{item.genre_str}}</span>
              <ul v-show="item.game_labels != null && item.game_type != 1" class="genre-str-label">
                <li v-for="(label, i) in item.game_labels" :key="i" :style="{border: '1px solid' + label.bgcolor,'color': label.bgcolor}">{{label.label_name}}</li>
              </ul>
            </div>
            <div>
              <div class="more_recommend" v-if="item.is_online">
                <span class="icon_recommend"></span>
                <span>多人推荐</span>
              </div>
              <div v-else class="down">已下架</div>
            </div>
          </div>
          <div class="game_detail" :class="[!item.offline? '':'game_detail_active']">详情</div>
        </li>
      </ul>
      <div v-if="gameList === null" class="none_img"></div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      gameList: [],
    }
  },
  created () {
    this.getGameList();
  },
  methods: {
    getGameList() {
      this.axios.get('/mygame.json', {}).then(res => {
        this.gameList = res.data.list_game
      })
    },
    itemClick(index) {

    },
    showDeleteButton(index) {

    },
    clearLoop(index) {
      
    }
  },
  filters: {
    filterFun: function (value) {
      if (value && value.length > 9) {
        //字符最大长度
        value = value.substring(0, 9) + "..."; //超过省略
      }
      return value;
    },
  }
}
</script>

<style lang="less" scoped>
.game_box {
  width: 9.146667rem;
  padding: .266667rem .426667rem 0;
}
.game_list {
  width: 9.146667rem;
  height: 2.533333rem;
  box-sizing: border-box;
  padding: .4rem .266667rem;
  display: flex;
  align-items: center;
  border-radius: .266667rem;
  background: #fff;
  margin-bottom: .133333rem;
}

.game_list img {
  width: 1.706667rem;
  height: 1.706667rem;
  flex-shrink: 1;
  margin-right: .293333rem;
}

.game_info {
  flex-grow: 1;
}

.game_name {
  display: flex;
  align-items: center;
  font-size: .373333rem;
  font-weight: bold;
  color: #222222;
  line-height: .506667rem;
}

// .game_name_active {
//   width: 4.466667rem;
//   text-overflow: ellipsis;
//   white-space: nowrap;
//   overflow: hidden;
// }

// .game_name_lenght {
//   width: ;
//   text-overflow: ellipsis;
//   white-space: nowrap;
//   overflow: hidden;
// }

.ganename-discount {
  margin-left: .133333rem;
  width: 1.066667rem;
  height: .426667rem;
  background: #ea3323;
  border-radius: .213333rem;
  font-size: .32rem;
  font-weight: 400;
  color: #ffffff;
  line-height: .426667rem;
  text-align: center;
}

.genre-str-label {
  display: flex;
  align-items: center;
}

.genre-str-label li {
  display: flex;
  align-items: center;
  height: .426667rem;
  font-size: .266667rem;
  line-height: .426667rem;
  border-radius: .08rem;
  padding: 0 .066667rem;
  margin-left: .133333rem;
}

.game_type {
  display: flex;
  font-size: .32rem;
  color: #808080;
  line-height: .533333rem;
  margin-top: .106667rem;
}

.game_type span:first-child {
  margin-right: .08rem;
}

.more_recommend {
  display: flex;
  align-items: center;
  font-size: .32rem;
  color: #808080;
  line-height: .426667rem;
}

.down {
  font-size: .32rem;
  color: #EA3323;
}

.icon_recommend {
  display: inline-block;
  width: .32rem;
  height: .32rem;
  background: url('../../../assets/img/server/users.png') no-repeat;
  background-size: 100%;
  margin-right: .133333rem;
}

.game_detail {
  flex-shrink: 1;
  width: 1.44rem;
  height: .613333rem;
  border: .013333rem solid #FF5543;
  border-radius: .306667rem;
  background: #ffffff;
  line-height: .613333rem;
  text-align: center;
  font-size: .32rem;
  color: #FF5543;
}

.game_detail_active {
  border: .013333rem solid #cccccc;
  color: #999999;
}

.dlg {
  font-size: .4rem;
  line-height: .8rem;
  padding: 0 .666667rem;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 50%;
  left: 50%;
  color: #fff;
  border-radius: .133333rem;
  transform: translate(-50%,-50%);
}

.none_img {
  width: 9.6rem;
  height: 3.466667rem;
  background: url('../../../assets/img/server/jy_none1.png') no-repeat;
  background-size: 100%;
  margin: 2.666667rem 0 0 .2rem;
}
</style>